<template>
  <div class="main_box">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="data_topCont" @click="showFinancial">
          <div class="data_leftImg">
            <img :src="require('../../assets/financial.png')">
          </div>
          <div style="padding:20px;">
            <div>财务准备</div>
            <el-progress
              :stroke-width="18"
              :percentage="70"
              style="width:230px; margin-top:20px;"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="data_topCont" @click="showInformation">
          <div class="data_leftImg" style="backg round:rgba(250,189,22,0.20)">
            <img :src="require('../../assets/information.png')">
          </div>
          <div style="padding:20px;">
            <div>资讯准备</div>
            <el-progress
              :stroke-width="18"
              :percentage="100"
              status="success"
              style="width:250px; margin-top:20px;"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="data_topCont">
          <div class="data_leftImg" style="background:rgba(240,89,96,0.20);">
            <img :src="require('../../assets/product.png')">
          </div>
          <div style="padding:20px; width:230px;">
            <div>产品新增</div>
            <p
              style="font-size: 12px;color: #000032; text-align:center">
              <b
              style="font-size: 40px;color: #F05960;">3</b>个
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
    <FinancialPreparation v-show="financial"/>
    <InformationPreparation v-show="information"/>
  </div>
</template>

<script>
import FinancialPreparation from './components/FinancialPreparation'
import InformationPreparation from './components/InformationPreparation'
export default {
  name: 'DataProcessing',
  components: {
    FinancialPreparation,
    InformationPreparation
  },
  data() {
    return {
      // img_financial: '',
      financial: true,
      information: false,
      percentageVal: 100,
      currentPage: 0,
      showText: false,
      options: [
        {
          value: '待审核',
          label: '待审核'
        },
        {
          value: '已通过',
          label: '已通过',
          disabled: true
        }
      ],
      options2: [
        {
          value: '证券公司',
          label: '证券公司'
        },
        {
          value: '金融公司',
          label: '金融公司',
          disabled: true
        }
      ],
      value2: '',
      search: '',
      search1: '',
      search2: '',
      search3: '',
      search4: '',
      search5: '',
      tableHead: [
        {
          prop: 'name',
          label: '报表名称',
          align: 'left',
          width: 15
        },
        {
          prop: 'address',
          label: '报表编号',
          align: 'left',
          type: 'hl',
          width: 30
        },
        {
          prop: 'description',
          label: '状态',
          align: 'left',
          width: 50
        },
        {
          prop: 'date',
          label: '产品品种',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报表生成时间',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '经办人',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报送频次',
          align: 'left',
          width: 10
        }
      ],
      oldTableData: [],
      tableData: [],
      // 数据值
      dataToArr: [
        {
          name: '余额息表',
          number: 'A1001',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1002',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1003',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1004',
          state: '已通过',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1005',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '息表',
          number: 'A10010',
          state: '待审核',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        }
      ],
      flag: true,
      status: []
    }
  },
  mounted() {
    this.tableData = this.dataToArr
    this.oldTableData = this.dataToArr
    const tableList = this.tableData
    const arr = []
    for (var i = 0; i < tableList.length; i++) {
      arr[i] = []
    }
    for (const i in tableList) {
      for (const b in tableList[i]) {
        arr[i].push(tableList[i][b])
      }
    }
    this.dataToArr = arr
  },
  created() {
    for (var i in this.dataToArr) {
      for (var b in this.dataToArr[i]) {
        if (this.dataToArr[0][b] === '待审核') {
          this.status.push(0)
        } else if (this.dataToArr[0][b] === '已通过') {
          this.status.push(1)
        } else if (this.dataToArr[0][b] === '已驳回') {
          this.status.push(2)
        }
      }
    }
  },
  methods: {
    showFinancial() {
      this.financial = true
      this.information = false
    },
    showInformation() {
      this.financial = false
      this.information = true
    },
    cellclick(row, column, cell, event) {
      // console.log(row) // 当前行数据
      // console.log(column)
      // console.log(cell) // 当前target
      // console.log(event)
    },
    // 多选的值
    MultipleSelectionValue(e) {},

    serchChange(e) {
      this.search = e
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // selectFocus (e) {
    //   this.temporary = this.tableData
    // },
    // selectBlur () {
    //   this.tableData = this.temporary
    // },
    // search2fun (e) {
    //   this.search = e
    //   console.log(e)
    //   this.tableData = this.tableData.filter(data => !this.search || Object.values(data).toString().toLowerCase().includes(this.search.toLowerCase()))
    //   let tableList = this.tableData
    //   let arr = []
    //   for (var i = 0; i < tableList.length; i++) {
    //     arr[i] = []
    //   }
    //   for (let i in tableList) {
    //     for (let b in tableList[i]) {
    //       arr[i].push(tableList[i][b])
    //     }
    //   }
    //   this.dataToArr = arr
    // },
    storage() {
      this.dataToArr = this.oldTableData
      console.log(this.dataToArr)
      this.search = ''
      this.search1 = ''
      this.flag = true
      this.search2 = null
      this.search3 = null
      this.search4 = null
      this.search5 = null
    }
  }
}
</script>

<style rel="stylesheet/stylus" lang="stylus" scope>
@import '../../assets/common';

.data_leftImg {
  width: 120px;
  height: 120px;
  background: rgba(26, 143, 254, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_topCont {
  display: flex;
  // border: 1px solid #eee;
  box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
}

.title {
  width: 100%;
  border-bottom: $borderbottom;
  line-height: $titlelineheight;
  font-size: $titlefontsize;
}

.audit_first {
  padding: 20px 0;
}

.audit_first_span {
  font-size: 14px;
  padding-right: 20px;
  color: $colorbluedark;
}

.claswithwn {
  width: 50%;
  margin-top: 20px;
}

.el-pagination {
  margin: 20px 0;
}

.btn {
  height: 100%;
  display: inline-block;
}

.btnpr {
  padding-right: 40px;
}

.wn1 {
  padding-right: 20px;
}

.btn2_c {
  text-align: center;
  margin-top: 20px;
}

div.gjsx {
  display: inline-block;
  font-size: 16px;
  padding: 0 20px;
  cursor: pointer;
}

.displayib {
  display: inline-block;
  width: 100%;
}

.bgg {
  background: #fbfbfb;
  padding: 10px 0;
  margin-top: 10px;
}

.rotate {
  transform-origin: center center; // 旋转中心要是正中间 才行
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transition: transform 0.2s; // 过度时间 可调
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.rotate1 {
  transform-origin: center center;
  transform: rotate(0deg); // 返回原点
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transition: transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.baobiao_tab {
  height: 300px;

  .progress-item {
    padding-top: 20px;
  }
}

.baobiao_tab1 {
  height: 373px;
}

div.el-progress-bar__outer {
  height: 14px !important;
}

.circle {
  margin: 0 auto;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 5px $colorbluedark;
  position: relative;
}

.circle_son {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: $colorbluedark;
  border-radius: 50%;
}

span>.circle_span {
  line-height: 50px;
}

.bbsc {
  margin: 0 auto;
  width: 80px;
  margin-top: 50px;

  p {
    text-align: center;
    line-height: 20px;
  }
}

.margint40 {
  margin-top: 40px;
}

.wunai {
}
</style>
